
<template>
		<div class="content">
				<div class="con_top">
						<div class="con_top_left" @click="goto">商品管理 </div>  <div>/ 发布商品</div>
				</div>
				<div class="con_con">
					<div class="con_ppo">
							<div class="con_ppo_nav">
								<div class="ppos_left">编辑商品基本信息</div>
								<div class="ppos_right">编辑商品详情</div>
							</div>
							<div class="leixing">商品类型</div>
							<div class="leixing_op">
									<div class="leixing_op_list" :class="{'leixing_op_list_s':nav_list == item.id}"  v-for="item in shp_list"  @click="nav_click(item.id)">
											<div class="list_title">{{item.title}}</div>
											<div class="list_title" style="color: #ccc;">({{item.remarks}})</div>
									</div>
							</div>
							<div class="leixing">基本信息</div>
							<div class="basic_information">
									<template>
										<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" >
												<FormItem label="商品名称:" prop="name" style="width: 600px;">
														<Input v-model="formValidate.name" placeholder="Enter your name"></Input>
												</FormItem>
												<FormItem label="分享描述:" prop="mail" style="width: 600px;">
														<Input v-model="formValidate.mail" placeholder="Enter your e-mail"></Input>
												</FormItem>
												 <FormItem label="商品类目:" style="width: 600px;">
														<Select v-model="formValidate.select">
																<Option value="beijing">New York</Option>
																<Option value="shanghai">London</Option>
																<Option value="shenzhen">Sydney</Option>
														</Select>
												</FormItem>
												<div class="updata_img">
														<div class="updata_img_title">商品图：</div>
													  <div class="updata_img_go">
															 <template>
																	<div class="demo-upload-list" v-for="item in uploadList">
																			<template v-if="item.status === 'finished'">
																					<img :src="item.url">
																					<div class="demo-upload-list-cover">
																							<Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
																							<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
																					</div>
																			</template>
																			<template v-else>
																					<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
																			</template>
																	</div>
																	<Upload
																			ref="upload"
																			:show-upload-list="false"
																			:default-file-list="defaultList"
																			:on-success="handleSuccess"
																			:format="['jpg','jpeg','png']"
																			:max-size="2048"
																			:on-format-error="handleFormatError"
																			:on-exceeded-size="handleMaxSize"
																			:before-upload="handleBeforeUpload"
																			multiple
																			type="drag"
																			action="//jsonplaceholder.typicode.com/posts/"
																			style="display: inline-block;width:78px;">
																			<div style="width: 78px;height:78px;line-height: 78px;">
																					<Icon type="ios-camera" size="20"></Icon>
																			</div>
																	</Upload>
																	<Modal title="View Image" v-model="visible">
																			<img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">
																	</Modal>
															</template>
														</div>
												</div>
												<FormItem label="商品分组:" style="width: 600px;">
														<Select v-model="formValidate.select">
																<Option value="beijing">New York</Option>
																<Option value="shanghai">London</Option>
																<Option value="shenzhen">Sydney</Option>
														</Select>
												</FormItem>
												<FormItem label="商品卖点:" style="width: 600px;">
														<Input v-model="formValidate.input" placeholder="Enter something..."></Input>
												</FormItem>
					<!-- 							<FormItem>
														<Button type="primary" @click="handleSubmit('formValidate')">保存并查看</Button>
														<Button @click="handleReset('formValidate')" style="margin-left: 8px">下一步</Button>
												</FormItem> -->	
										</Form>
									</template>
							</div>
							<div class="leixing">价格库存</div>
							<div class="jiage" style="width: 100%;padding-left: 40px;">
								<template>
									<div style="display: flex;align-items: center;margin-bottom:30px;">
										<div style="width: 60px;text-align: right;">价格:</div>
										<Input v-model="value11" style="width: 200px;margin-left: 15px;">
												<span slot="prepend">¥</span>
										</Input>
									</div>
									<div style="display: flex;align-items: center;margin-bottom:30px">
										<div style="width: 60px;text-align: right;">划线价:</div>
										<Input v-model="value11" style="width: 200px;margin-left: 15px;">
												<span slot="prepend">¥</span>
										</Input>
									</div>
									<div style="display: flex;align-items: center;margin-bottom:30px">
										<div style="width: 60px;text-align: right;">库存:</div>
										<Input v-model="value11" style="width: 200px;margin-left: 15px;">
										</Input>
									</div>
									<div style="display: flex;align-items: center;margin-bottom:30px">
										<div style="width: 60px;text-align: right;">商品编码:</div>
										<Input v-model="value11" style="width: 200px;margin-left: 15px;">
										</Input>
									</div>
									<div style="display: flex;align-items: center;margin-bottom:30px;">
										<div style="width: 60px;text-align: right;">成本价:</div>
										<Input v-model="value11" style="width: 200px;margin-left: 15px;">
												<span slot="prepend">¥</span>
										</Input>
									</div>
								</template>
							</div>
							<div class="leixing">其他信息</div>
							<div class="information">
									<div class="freight">
											<div class="freight_left">快递运费：</div>
											<div class="freight_right">
												<template>
														<RadioGroup v-model="vertical" vertical>
																<Radio label="apple">
																		<Icon type="social-apple"></Icon>
																		<span>Apple</span>
																</Radio>
																<Radio label="android">
																		<Icon type="social-android"></Icon>
																		<span>Android</span>
																</Radio>
																<Radio label="windows">
																		<Icon type="social-windows"></Icon>
																		<span>Windows</span>
																</Radio>
														</RadioGroup>
												</template>
											</div>
									</div>
							</div>
					</div>
				</div>
		</div>
</template>

<script>
	import api from "../api"
	let t
	export default {
				data(){
					return {
						nav_list:'0',
						shp_list:[
							{
								id:'1',
								title:'不仅能发',
								remarks:'年贷款的'
							},
							{
								id:'2',
								title:'各个省市',
								remarks:'大地飞歌'
							},
							{
								id:'3',
								title:'天天团委我',
								remarks:'将加大对非我'
							},
						],
						formValidate: {
                    name: '',
                    mail: '',
                    city: '',
                    gender: '',
                    interest: [],
                    date: '',
                    time: '',
                    desc: ''
                },
            ruleValidate: {
                    name: [
                        { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                    ],
                    mail: [
                        { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
                        { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
                    ],
                },
						defaultList: [
                    {
                        'name': 'a42bdcc1178e62b4694c830f028db5c0',
                        'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
                    },
                    {
                        'name': 'bc7521e033abdd1e92222d733590f104',
                        'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
                    }
                ],
            imgName: '',
            visible: false,
            uploadList: [],
						vertical: 'apple'
					}
				},
				mounted(){
					t=this 
					t.uploadList = t.$refs.upload.fileList;
				},
				methods:{
						goto(){
							api.goto(this,'administration',{})
						},
						nav_click(e){
							t.nav_list=e
						},
						         handleView (name) {
                this.imgName = name;
                this.visible = true;
            },
            handleRemove (file) {
                const fileList = this.$refs.upload.fileList;
                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
            },
            handleSuccess (res, file) {
                file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
                file.name = '7eb99afb9d5f317c912f08b5212fd69a';
            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: 'The file format is incorrect',
                    desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: 'Exceeding file size limit',
                    desc: 'File  ' + file.name + ' is too large, no more than 2M.'
                });
            },
            handleBeforeUpload () {
                const check = this.uploadList.length < 5;
                if (!check) {
                    this.$Notice.warning({
                        title: 'Up to five pictures can be uploaded.'
                    });
                }
                return check;
            }
				}
	}
</script>

<style >
		.content{
			width:1500px;
			height:100%;
			background-color: #F7EED6;
		}
		.con_top{
			width: 100%;
			height: 55px;
			display: flex;
			align-items: center;
			font-size: 14px;
			color: #333;
			padding-left: 30px;
			box-sizing: border-box;
			background-color: #FFFFFF;
		}
		.con_con{
			width: 100%;
			/* height: 100%; */
			padding: 15px;
			background-color: #F7EED6;
			/* padding-bottom: 100px; */
			box-sizing: border-box;
		}
		.con_ppo{
			width: 100%;
			padding: 15px;
			box-sizing: border-box;
			background-color: #FFFFFF;
			margin-bottom: 50px;
		}
		.con_top_left{
			margin-right: 5px;
			color: #0074D9;
		}
		.con_ppo_nav{
			width: 100%;
			height: 45px;
			background-color: #F8F8F8;
			display: flex;
			margin-bottom: 20px;
		}
		.ppos_left{
			width: 50%;
			height: 100%;
			background-color: #0074D9;
			line-height: 45px;
			text-align: center;
			color: #FFFFFF;
			font-size: 15px;
		}
		.ppos_right{
			width: 50%;
			height: 100%;
			line-height: 45px;
			text-align: center;
			color: #333;
			font-size: 15px;
		}
		.leixing{
			width: 100%;
			height: 40px;
			color: #333;
			font-size: 15px;
			line-height: 40px;
			padding-left: 10px;
			text-align: left;
			background-color: #f8f8f8;
			margin-bottom: 30px;
		}
		.leixing_op{
			width: 100%;
			height: 50px;
			display: flex;
			margin-bottom: 30px;
		}
		.leixing_op_list{
			width: 120px;
			height: 100%;
			margin-right: 20px;
			text-align: center;
			border-radius: 3px;
			border: 1px solid #ccc;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.list_title{
			width: 100%;
			font-size: 13px;
			text-align: center;
		}
		.leixing_op_list_s{
			border: 1px solid #0074D9;
		}
		.basic_information{
		width: 100%;
		height: 100%;
		padding-left: 35px;
		}
		.updata_img{
			width: 100%;
			height: 100px;
			display: flex;
		}
		.updata_img_title{
			width: 70px;
			height: 100%;
			text-align: right;
			font-size: 12px;
			margin-right: 10px;
		}
		.demo-upload-list{
        display: inline-block;
        width: 80px;
        height: 80px;
        text-align: center;
        line-height: 80px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
		.information{
			width: 100%;
			padding-left: 50px;
		}
		.freight{
			width: 100%;
			display: flex;
		}
		.freight_left{
			width: 60px;
			height: 100%;
			text-align: right;
		}
		.freight_right{
			width: 500px;
		}
</style>
